<template>
    <div class="teamwork">
      <div class="teamwork-info">
        <dir class="info-box">
          <div class="info-text">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名&nbsp;:</div>
          <div class="info-input"><input type="text" v-model="userName" placeholder="请填写您的真实姓名"></div>
        </dir>
        <dir class="info-box">
          <div class="info-text">微&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;信&nbsp;:</div>
          <div class="info-input"><input type="text" v-model="weixin" placeholder="请填写您的微信"></div>
        </dir>
        <dir class="info-box">
          <div class="info-text">手机号码&nbsp;:</div>
          <div class="info-input"><input type="text" v-model="phone" placeholder="请输入手机号码"></div>
        </dir>
        <dir class="info-box">
          <div class="info-text">省市区&nbsp;&nbsp;&nbsp;:</div>
          <div class="info-input">
            <picker mode="region" @change="bindRegionChange" value="region" class="picker">
              <div class="region-content">{{region}}</div>
            </picker>
          </div>
        </dir>
        <dir class="info-box">
          <div class="info-text">详细地址&nbsp;:</div>
          <div class="info-input"><input type="text" v-model="address" placeholder="请填写您的区域"></div>
        </dir>
        <dir class="info-box-mode">
          <div class="info-text">销售渠道&nbsp;:</div>
          <div class="info-input"><textarea maxlength=-1 v-model="sales_channels" class="info-mode" placeholder="请填写您的销售渠道" /></div>
        </dir>
      </div>
      <div class="teamwork-btn" @click="reqCooperationIntention">提交</div>
    </div>
</template>

<script>
import { checkName, checkPhone } from '../../utils/checkInput.js'
import { postCooperationIntention } from '../../api/index.js'

export default {
  data(){
    return {
      userToken: '',
      userName: '',
      weixin: '',
      phone: '',
      region: '省,市,区',
      regionParmas:[],
      address: '',
      mode: '',
      sales_channels: '',
    }
  },
  onLoad(option){
    this.init()
  },
  methods:{
    //点击地区组件
    bindRegionChange(e) {
      let addr = e.mp.detail.value;
      addr.forEach((item)=>{
        this.regionParmas.push(item)
      })
      let addrStr = '';
      if(addr[0] == addr[1]){
        addr.splice(0,1)
      }
      addr.forEach((item)=>{
        addrStr = addrStr + item + ',';
      })
      
      this.region = addrStr.substring(0,addrStr.length-1);
    },
    //进入页面初始化表单数据
    init(){
      this.userToken = wx.getStorageSync('userToken');
      this.userName = '';
      this.weixin = '';
      this.phone = '';
      this.region = '省,市,区';
      this.address = '';
      this.sales_channels = '';
    },
    //提交按钮
    async reqCooperationIntention(){
      if(!checkName(this.userName)){
        wx.showModal({
          title: '提示',
          content: '请输入2-4个字符的名字',
          showCancel: false,
        })
        return
      }
      if(!checkPhone(this.phone)){
        wx.showModal({
          title: '提示',
          content: '请输入正确的手机号码',
          showCancel: false,
        })
        return
      }
      if(this.weixin == ''){
        wx.showModal({
          title: '提示',
          content: '微信号不能为空',
          showCancel: false,
        })
        return
      }
      if(this.region == '省,市,区' || this.address == ''){
        wx.showModal({
          title: '提示',
          content: '请填写完整的地址',
          showCancel: false,
        })
        return
      }
      let userToken = wx.getStorageSync('userToken');
      
      let parmas = {
        user_token: userToken,
        real_name: this.userName,
        phone: this.phone,
        wechat_num: this.weixin,
        province: this.regionParmas[0],
        city: this.regionParmas[1],
        area: this.regionParmas[2],
        address:this.address,
        sales_channels: this.sales_channels
      }
      let res = await postCooperationIntention(parmas)
      if(res.data.level == 'success'){
        wx.showModal({
          title: '提示',
          showCancel: false,
          content: '你已提交合作意向表,商家会尽快与你联系',
          success (res) {
            if (res.confirm) {
              wx.navigateBack({
                delta: 1
              })
            }
          }
        })
      } else {
        wx.showToast({
          title: '提交失败',
          icon: 'none',
          duration: 1000
        })
      }
    }
  }
} 
</script>

<style lang="stylus" scoped>
  .teamwork
    width 100%
    height 100vh
    background-color #f1f1f1
    padding-top 20rpx
    .info-text
      flex 1
      text-align center
    .info-input
      flex 2
    .teamwork-info
      width 100%
      background-color #fff
      .info-box
        height 40rpx
        border 1px solid #f1f1f1 
        display flex
        justify-content center
        align-items center
        font-size 14px
        padding 20rpx
      .info-box-mode
        display flex
        justify-content center
        align-items center
        font-size 14px
        padding 10rpx
        .info-text
          width 100%
          height 200rpx
        .info-input
          border 1px #f1f1f1 solid
        .info-mode
          padding 10rpx
          width 100%
          height 200rpx
    .teamwork-btn
      position absolute
      bottom 0
      left 0
      width 100%
      height 80rpx
      text-align center
      line-height 80rpx
      background-color #888
      color #fff
      font-size 14px
      &:active
        background-color #777
    .region-content
      color #666
</style>